<template>
    <div class="app">
        <div class="order_page">
            <div class="header">
                <header>
          <span class="back">
            <span class="iconfont icon-iconfontjiantou1" @click="back"></span>
          </span>
                    <h3>预约课程</h3>
                </header>
            </div>

            <div class="order_info">
                <!-- {{teacherDetailImgItem}} -->
                <div class="ti_base">
                    <img :src="teacherDetailImgItem.avatar"/>
                    <div>
                        <p>
                            <span>{{teacherDetailImgItem.teacher_name}}</span>
                            <font>{{teacherDetailImgItem.level_name}}</font>
                        </p>
                        <p>
                            男
                            <font>{{teacherDetailImgItem.teach_age}}年教龄</font>
                        </p>
                    </div>
                    <button @click="onClickFollow">查看详情</button>
                </div>
            </div>
            <div class="op_title">
                选择时间
                <span>(北京时间)</span>
            </div> 
            <div class="op_time">       
                <van-tabs v-model="active"  title-active-color="#eb6100">          
                    <van-tab v-for="item in teacherInviteItem.weekDateList"
                             :key="item.id"
                             :disabled="item.flag">
                        <template #title>          
                            <div>
                                 <!-- 添加的天 -->
                                 <p>{{item.day}}</p>
                                 <!-- 时间戳 -->
                                 <p>{{item.date}}</p>              
                            </div>
                                        
                        </template>    
                    </van-tab>   
                </van-tabs>     
            </div>
            <div>
                <div class="empty">
                    <img src="../../../public/img/empty.0d284c2e.png" alt/>
                    <p>暂无信息</p>
                </div>
            </div>
            <div class="course_btn">
                <span>立即预约</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active: 0,
                id: '',
            };
        },
        computed: {
            // 讲师的详情页 头像
            teacherDetailImgItem() {
                return this.$store.state.teacher.teacherDetailImgItem;
            },
            // 讲师的详情页 预约时间
            teacherInviteItem() {
                return this.$store.state.teacher.teacherInviteItem
            }
        },
        mounted() {
            let id = this.$route.query.id;
            this.id = id
            this.$store.dispatch("teacherDetailImg", id); // 讲师的详情页 头像
            this.$store.dispatch("teacherInvite", id); // 讲师的详情页 预约时间
        },
        methods: {
            back() {
                window.history.back();
            },
            // 查看详情
            onClickFollow() {
                this.$router.push({
                    path: "/teacher",
                    query: {
                        id: this.id,
                    },
                });
            },
        },
    };
</script>

<style scoped lang="scss">
    .order_page {
        min-height: 100vh;
        background: #f0f2f5;
        padding-bottom: 16vw;
        box-sizing: border-box;

        .header {
            height: 26.66667vw;
            line-height: 11.73333vw;
            background: linear-gradient(180deg, #63b7fe, #4e7de3);

            header {
                height: 11.73333vw;
                width: 100%;
                padding-right: 6.66667vw;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;

                .back {
                    width: 6.66667vw;
                    height: 100%;
                    padding-left: 2.66667vw;

                    span {
                        color: #fff;
                        font-size: 40px;
                    }
                }

                h3 {
                    flex: 2;
                    text-align: center;
                    font-size: 4.8vw;
                    color: #fff;
                }
            }
        }
    }

    .order_info {
        margin: -15.2vw auto 0;
        width: 94.66667vw;
        padding: 0 4vw;
        background: #fff;
        border-radius: 1.06667vw;
        box-sizing: border-box;

        .ti_base {
            height: 20.26667vw;
            display: flex;
            align-items: center;

            img {
                width: 10.66667vw;
                height: 10.66667vw;
                margin-right: 3.2vw;
                border-radius: 50%;
                flex: none;
            }

            div {
                flex: 1;

                p:nth-child(1) {
                    padding-bottom: 0.8vw;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;

                    span {
                        font-size: 4vw;
                        color: #595959;
                        line-height: 5.6vw;
                        padding-right: 1.33333vw;
                    }

                    font {
                        font-size: 2.93333vw;
                        color: #ea7a2f;
                    }
                }

                p:nth-child(2) {
                    font-size: 3.2vw;
                    color: #b7b7b7;
                    line-height: 4.53333vw;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;

                    font {
                        font-size: 3.2vw;
                        color: #b7b7b7;
                        line-height: 4.53333vw;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                    }
                }
            }

            button {
                flex: none;
                width: 21vw;
                height: 7.5vw;
                background: #fff;
                border-radius: 4.13333vw;
                font-size: 3.46667vw;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: #eb6100;
                border: none;
                text-align: center;
                border: 1px solid #eb6100;
            }
        }
    }

    .op_title {
        font-size: 4vw;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #595959;
        line-height: 13.33333vw;
        position: relative;
        padding-left: 6.66667vw;
        height: 13.33333vw;

        span {
            font-size: 3.2vw;
        }
    }

    .op_title::before {
        position: absolute;
        content: "";
        left: 3.2vw;
        top: 4.53333vw;
        width: 0.8vw;
        height: 4.26667vw;
        background: #eb6100;
    }

    .op_time {
        width: 95%;
        height: 20vw;
        margin: 0 auto;
        background: #fff;

        div {
            text-align: center;
            line-height: 40px;

            p {
                font-size: 27px;
            }
        }
    }

    .van-tabs--line /deep/ .van-tabs__wrap {
        width: 95%;
        margin: 0 auto;
        border-radius: 10px;
        height: 16vw;
        border-bottom: 1px solid #eee;

        .van-tab {
            margin-top: 20px;
        }
    }

    .op_time /deep/ .van-tabs__line {
        width: 5.6vw !important;
        height: 1.06667vw;
        background: #4169ff;
    }

    .empty {
        padding-top: 5.33333vw;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 40vw;
            height: 40vw;
        }

        p {
            font-size: 4vw;
            color: #8c8c8c;
            margin-top: 5.4vw;
        }
    }

    .course_btn {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 1.17333rem;
        height: 11.73333vw;
        line-height: 1.17333rem;
        line-height: 11.73333vw;
        text-align: center;
        background: #eb6100;
        font-size: 0.45333rem;
        font-size: 4.53333vw;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #fff;
    }
</style>